<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>直播间</title>
		<!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js" charset="utf-8"></script>
		<style type="text/css">
			* { margin: 0; padding: 0; }
			body { background: #222; height: 100vh; }
			.image-text { width: 40px; height: 41px; background: #444; background-size: 40px 41px; display: inline-block; position: fixed; left: 12px;
			  top: 10px; font-size: 12px; color: #fff; border-radius: 40px; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center;
			  -ms-flex-align: center; align-items: center; -ms-flex-direction: column; flex-direction: column; font-style: normal; opacity: .7; }
			.image-text div { transform: scale(.85); line-height: 1; }
			.live-show { height: 100%; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center;
			  -ms-flex-align: center; align-items: center; -ms-flex-direction: column; flex-direction: column; }
			.live-video-alert { width: 100vw; height: 24px; line-height: 24px; color: #fff; text-align: center; position: fixed; bottom: 13vh; font-size: 12px; }
			.alert-circle { width: 8px; height: 8px; background: #ffc000; color: #ffc000; text-align: center; border-radius: 50%; -moz-border-radius: 50%;
			  display: inline-block; margin-right: 6px; animation: circle-transition 2s; animation-iteration-count: infinite; }
				@keyframes circle-transition {0%{opacity:1;filter:Alpha(opacity=100)}25%{opacity:.75;filter:Alpha(opacity=75)}50%{opacity:.5;filter:Alpha(opacity=50)}75%{opacity:.25;filter:Alpha(opacity=25)}to{opacity:0;filter:Alpha(opacity=0)}}
		</style>
	</head>
	<body>
		<div class="live-show">
			<a href="javascript: window.history.back();"><i class="image-text"><div>图文</div> <div>模式</div></i></a>
			<div id="video-container"></div>	
			<div class="live-video-alert"><span class="alert-circle"></span><span>温馨提示：直播信号有延时</span></div>	
		</div>
		
		<script>
		    (function () {
					function getQuery(par){
						var url = window.location.href
						var urlsearch = url.split('?');
						pstr = urlsearch[1].split('&');
						for (var i = pstr.length - 1; i >= 0; i--) {
							var tep = pstr[i].split("=");
							if(tep[0] == par){
								return tep[1];
							}
						}
						return(false);
					}
					function getParams(name) {
						var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');

						var r = window.location.search.substr(1).match(reg);
						if (r != null) {
							return decodeURIComponent(r[2]);
						}
						return null;
					}
	
					function getPathParams() {
						var path = location.pathname.split('/');
						if (path[1] == 'vod-player') {
							return {
								'path': location.origin + path.slice(0, 4).join('/'),
								'appid': path[2],
								'fileid': path[3]
							}
						} else {
							return null;
						}
					}
	
					var rtmp = getParams('rtmp'),
						flv = getParams('flv'),
						m3u8 = getParams('m3u8'),
						mp4 = getParams('mp4'),
						live = (getParams('live') == 'true' ? true : false),
						coverpic = getParams('coverpic'),
						width = getParams('width'),
						height = getParams('height'),
						volume = getParams('volume'),
						flash = (getParams('flash') == 'true' ? true : false),
						x5_player = (getParams('x5_player') == 'false' ? false : true),
						h5_flv = (getParams('h5_flv') == 'true' ? true : false),
						autoplay = (getParams('autoplay') == 'true' ? true : false),
						flashUrl = (function () {
							var params = getPathParams();
							if (params) {
								return params.path + '/player/release/QCPlayer.swf';
							}
							return '//imgcache.qq.com/open/qcloud/video/player/release/QCPlayer.swf'
						})(),
						log = getParams('log');
					/**
					 * 视频类型播放优先级
					 * mobile ：m3u8>mp4
					 * PC ：RTMP>flv>m3u8>mp4
					 */
					
					var sname = 'lot' + getQuery('id')
					var options = {
						m3u8: `https://zb.kireido.cn/live/${sname}.m3u8` ,
						flv: `https://zb.kireido.cn/live/${sname}.flv`,
						rtmp: `rtmp://zb.kireido.cn/live/${sname}`,
						autoplay: true,
						controls: false,
						live: live,
						width: width || '480',
						height: height || '320',
						volume: volume || 0.5,
						flash: flash,
						flashUrl: flashUrl,
						x5_player: x5_player,
						h5_flv: h5_flv,
						wording: {
							2032: '请求视频失败，请检查网络',
							2048: '请求m3u8文件失败，可能是网络错误或者跨域问题'
						},
						listener: function (msg) {
							if(msg.type == 'load') {
								var video = document.querySelectorAll('video')[0]
								video.muted = true
								video.play()
							}
						}
					};
					window.tcplayer = new TcPlayer('video-container', options);
					var video = document.querySelectorAll('video')[0]
					video.muted = true
					setTimeout(() => {
						video.play()
					}, 1000)
			})();
		</script>
	</body>
</html>